<template>
	<view class="main flex_col">
		<topCommonTitleBar :statePerch="false" class="topBar" arrow="black" titleColor="#333333"></topCommonTitleBar>
		<view style="height: 160rpx;"></view>
		<view class="title">找回密码</view>
		<view class="form">
			<view class="mar_top60 form_item">
				<text class="item_title">手机号</text>
				<view class="group_6">
					<input placeholder="请输入手机号" v-model="form.mobile" class="input" />
				</view>
			</view>
			<view class="mar_top58 form_item">
				<view class="justify_between group_11">
					<view class="flex_col group_12">
						<text class="item_title">输入验证码</text>
						<input placeholder="请输入验证码" class="input" v-model="form.captcha"
							style="margin-left: 0rpx;margin-top: 13rpx;" />
					</view>
					<view class="group_13 verify" @click.stop="sendCode">
						<block v-if="countDown == 60">
							获取验证码
						</block>
						<block v-else>
							重新发送{{ countDown }}
						</block>
					</view>
				</view>
			</view>
			<view class="mar_top60 form_item">
				<text class="item_title">输入新密码</text>
				<view class="group_6">
					<input placeholder="请输入登录密码" v-model="form.newpassword" :password="show" class="input" />
					<u-icon class="clear" name="close-circle-fill" @click='form.newpassword = ""'></u-icon>
					<image class="icon" src="@/static/img/login/close.png" v-if="show" @click="show = !show">
					</image>
					<image class="icon" src="@/static/img/login/open.png" v-else @click="show = !show">
					</image>
				</view>
			</view>
			<view class="mar_top60 form_item">
				<text class="item_title">确认密码</text>
				<view class="group_6">
					<input placeholder="请输入确认密码" v-model="form.newpassword2" :password="show1" class="input" />
					<u-icon class="clear" name="close-circle-fill" @click="form.newpassword2 = ''"></u-icon>
					<image class="icon" src="@/static/img/login/close.png" v-if="show1" @click="show1 = !show1">
					</image>
					<image class="icon" src="@/static/img/login/open.png" v-else @click="show1 = !show1">
					</image>
				</view>
			</view>
		</view>

		<view class="justify_center items_center button" @click.stop="submit">提交</view>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/login/forgotPsw"></script>

<style lang="scss">
.main {
	background-color: #ffffff;
	width: 100%;
	min-height: 100vh;
	height: 100%;
	padding: 0 32rpx;

	.topBar {
		position: fixed;
		width: 750rpx;
		left: 0;
		top: 0;
	}

	.title {
		font-size: 44rpx;
		color: #222229;
		font-weight: normal;
		margin: 50rpx 0 100rpx 0;
	}

	.mar_top60 {
		margin-top: 60rpx;
	}

	.form {
		overflow-y: auto;

		.form_item {
			border-bottom: 1rpx solid #c0c4cc;
			padding-bottom: 26rpx;
		}

		.item_title,
		.input {
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			line-height: 34rpx;
			white-space: nowrap;
		}



	}


	.mar_top58 {
		margin-top: 58rpx;
	}

	.button {
		margin: 0 auto;
		color: rgb(255, 255, 255);
		font-size: 28rpx;
		width: 620rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #317cfe;
		border-radius: 128px;
		margin-top: 100rpx;
	}

	.icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 0);
	}

	.clear {
		position: absolute;
		top: 2rpx;
		right: 60rpx;
		width: 40rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 0);
	}

}


.group_6 {
	position: relative;
	margin-top: 26rpx;
	color: rgb(65, 65, 65);
	font-size: 28rpx;
	line-height: 34rpx;
	white-space: nowrap;
}

.group_11 {
	padding: 0 4rpx 10rpx 0;
}

.group_12 {
	color: rgb(51, 51, 51);
	font-size: 32rpx;
	line-height: 34rpx;
	white-space: nowrap;
}

.group_13 {
	color: rgb(59, 140, 245);
	font-size: 28rpx;
	line-height: 34rpx;
	white-space: nowrap;
	width: 190rpx;
	position: relative;
	margin-top: 13rpx;
}
</style>
